



import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx'
import { Popconfirm, Progress, notification, message, Modal, Drawer, Alert, Tabs, Table, Divider, Tag, Timeline, Tree, Statistic, Popove, List, Empty, Descriptions, Calendar, Card, Carousel, Collapse, Tooltip, Comment, Badge, Avatar, TimePicker, Transfer, TreeSelect, Select, Slider, Switch, Radio, Rate, Mentions, InputNumber, Input, Form, DatePicker, Cascader, Checkbox, AutoComplete, Button, Upload, Icon, Spin, Typography, Row, Col, Header, Footer, Sider, Content, Affix, Breadcrumb, Menu, Dropdown, Pagination, PageHeader, Steps } from 'antd'
import moment from 'moment';
const { SubMenu } = Menu;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const { Step } = Steps;
const { Title } = Typography;
const { Option } = Mentions;
const { Option1 } = Select;
const { Panel } = Collapse;
const { TabPane } = Tabs;
const { SHOW_PARENT } = TreeSelect;

@inject('YunYingStore')
@observer
export class TreeSelects extends Component {
  state = {
    value: [],
  };

  onChange = value => {
    this.setState({ value });
  };

  render() {
    let treeData = [{
      title: '摄像头',
      value: this.props.YunYingStore.cameraList,
      key: this.props.YunYingStore.cameraList,
      children: []
    }]
    for (let [index, item] of this.props.YunYingStore.cameraList.entries()) {
      treeData[0].children.push({
        title: item,
        value: item,
        key: item,
      })
    }
    const tProps = {
      treeData,
      value: this.state.value,
      onChange: this.onChange,
      treeCheckable: true,
      showCheckedStrategy: SHOW_PARENT,
      searchPlaceholder: '请选择摄像头',
      style: {
        width: '350px',
      },
    };
    return <TreeSelect {...tProps} />;
  }
}
